<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>天成艺术</title>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="yes" name="apple-touch-fullscreen"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="../css/base.css"/>
    <link rel="stylesheet" href="../css/login.css"/>
</head>
<body class="bg-09blue">
<div class="login-main">
    <div class="pt50 tc logo-box">
        <img src="../images/logo.png" alt="logo" width="150"/>
    </div>
    <div class="mt75 pl25 pr25 form-box forgot-box">
        <form id="formChange">
            <fieldset>
                <legend class="hide">登录表单</legend>
                <p class="p10 border-b-7ablue input-item pr">
                    <label for="account"><i class="iconfont mr10 fs14 typo-9cgray">&#xe60c;</i></label>
                    <input id="account" class="bg-09blue fs14 typo-white" type="text" name="account" placeholder="手机号" autocomplete="off" value="13678903456" disabled/>
                    <i class="J_tooltip J_btnClose iconfont fs14 typo-white pa icon-tip" style="display:none">&#xe6da;</i>
                </p>
                <p class="mt15 p10 border-b-7ablue input-item pr">
                    <label for="oldpassword"><i class="iconfont mr10 fs14 typo-9cgray">&#xe7c6;</i></label>
                    <input id="oldpassword" class="bg-09blue fs14 typo-white" type="password" name="oldpassword" placeholder="旧密码" autocomplete="off"/>
                    <i class="J_tooltip J_btnShow iconfont fs14 typo-white pa icon-tip" style="display:none">&#xe63d;</i>
                </p>
                <p class="mt15 p10 border-b-7ablue input-item pr">
                    <label for="password"><i class="iconfont mr10 fs14 typo-9cgray">&#xe7c6;</i></label>
                    <input id="password" class="bg-09blue fs14 typo-white" type="password" name="password" placeholder="新密码" autocomplete="off"/>
                    <i class="J_tooltip J_btnShow iconfont fs14 typo-white pa icon-tip" style="display:none">&#xe63d;</i>
                </p>
                <p class="mt15 p10 border-b-7ablue input-item pr">
                    <label for="password_again"><i class="iconfont mr10 fs14 typo-9cgray">&#xe7c6;</i></label>
                    <input id="password_again" class="bg-09blue fs14 typo-white" type="password" name="password_again" placeholder="确认密码" autocomplete="off"/>
                    <i class="J_tooltip J_btnShow iconfont fs14 typo-white pa icon-tip" style="display:none">&#xe63d;</i>
                </p>
                <button class="block bg-9cblue bor-r5 mt40 pt10 pb10 fullwidth tc fs14 typo-white btn-default" type="submit">
                    <i class="J_loading inblo mr5 pr vm loading-box" style="display: none;"><span class="iconfont fs14 fn pa animate-rotate">&#xe67c;</span></i>
                    立即登录
                </button>
            </fieldset>
        </form>
    </div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layer/2.4/layer.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/3.51/jquery.form.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="../js/jquery.validate.extend.js"></script>
<script>
    $(function() {
        /**
         * 清空input框/显示密码
         */

        // input框激活时显示按钮
        $('input').focus(function() {
            $(this).siblings('.J_tooltip').show().parent().siblings().find('.J_tooltip').hide();
        });

        $('.J_tooltip').on('click', function() {
            var _currentInput = $(this).siblings('input'),
                    currentInputAttr = _currentInput.attr('type');

            // 按钮-清空
            if($(this).hasClass('J_btnClose')) {
                _currentInput.val('');
            }

            // 按钮-显示隐藏密码
            else if($(this).hasClass('J_btnShow')) {
                if(currentInputAttr == 'password') {
                    _currentInput.attr('type', 'text');
                } else{
                    _currentInput.attr('type', 'password');
                }
            }
            _currentInput.focus();
        });

        /**
         * 登录验证
         */
        var _formChange = $('#formChange');
        _formChange.validate({
            rules: {                                                    // 验证规则
                oldpassword: {                                          // 验证项-旧密码
                    required: true,                                    // 必填
                    minlength: 6                                        // 至少6个字符
                },
                password: {
                    required: true,
                    minlength: 6,
                    notEqualTo: '#oldpassword'
                },
                password_again: {
                    required: true,
                    minlength: 6,
                    equalTo: '#password'
                }
            },
            messages: {                                                 // 报错信息
                oldpassword: {                                          // 验证项-旧密码
                    required: "请输入您的密码",                         // 为空时的报错信息
                    minlength: $.validator.format("至少{0}个字符")      // 密码长度不够时的报错
                },
                password: {
                    required: "请输入您的密码",
                    minlength: $.validator.format("至少{0}个字符"),
                    notEqualTo: "新密码不能与旧密码一样"
                },
                password_again: {
                    required: "请输入您的密码",
                    minlength: $.validator.format("至少{0}个字符"),
                    equalTo: "新密码两次输入结果不一样"
                }
            },
            focusInvalid: false,                                        // 取消验证时，未通过验证元素获取焦点
            onkeyup: false,                                             // 取消keyup时验证
            focusCleanup: true,                                         // 未通过元素获取焦点时，移除错误提示
            errorClass: "error",                                        // 错误提示自定义样式
            submitHandler: function(form) {                            // 验证成功之后，提交
                var params = _formChange.serialize(),
                        options = {
                            type: "post",
                            data: params,
                            dataType: "json",
                            timeout: 5000,
                            url: "http://api.zhej360.com/user/changePassword",  // 登录后台验证接口
                            beforeSend: function() {
                                _formChange.find(".J_loading").show();
                            },
                            success: function(resp) {
                                if(resp.status == 1) {

                                    // 成功跳转登录页
                                    _formChange.find(".J_loading").hide();
                                    layer.msg("密码修改成功");
                                    setTimeout(function() {
                                        document.location.href = "login.html";
                                    }, 3000);
                                }
                            },
                            complete: function(XMLHttpRequest, status) {
                                if(status == "timeout") {

                                    // 超时提示
                                    _formChange.find(".J_loading").hide();
                                    layer.msg("Oops,请求超时");
                                }
                            }
                        };
                $(form).ajaxSubmit(options);
                return false;
            }
        });
    });
</script>
</html>